<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../elementUI/index.css">
    <script type="text/javascript" src="../../js/echarts.min.js"></script>
</head>
<style scoped>
    #app {
        background-color: #efefef;
    }

    .data {
        width: 100%;
        padding-bottom: 0.5rem;
    }

    .block {
        width: 100%;
    }

    .order {
        background-color: white;
        width: 95%;
        margin: auto;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding: 0.5rem;
        border-radius: 1rem;
    }

    .item {
        display: flex;
        align-items: center;
        line-height: 2.5;
    }

    .zi {
        color: gray;
    }

    .show-children {
        cursor: pointer;
    }

    .arrow-icon {
        display: inline-block;
        font-size: 18px;
    }
</style>

<body>
    <div id="app" style="min-height: 800px;">
        <div class="data">
            <div>
                <div class="block">
                    <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" @change="handleDateChange" style="width: 100%;">
                    </el-date-picker>
                </div>
                <!-- <div class="block">
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" @change="handleDateChange" style="width: 100%;">
                    </el-date-picker>
                </div> -->
            </div>
            <div class="order">
                <div style="text-align: center;font-size: 1.2rem;line-height: 2.5;">供应销售对账</div>
                <div class="item">
                    <div class="zi">总订单金额:</div>
                    <div>{{Number(order.Count_Purchase_Amount).toFixed(2)}}元</div>
                </div>
                <div class="item">
                    <div class="zi">总已付金额:</div>
                    <div>{{Number(order.Count_Paid_Amount).toFixed(2)}}元</div>
                </div>
            </div>
            <div id="main" style="width: 95%;height:410px;margin-top: 20px;padding: 1rem;background-color: white;">
            </div>
            <div v-for="(item,index) in tableData" :key="index" class="order">
                <div class="item">
                    <div class="zi">供应商名称:</div>
                    <div>{{item.Supplier_Name}}</div>
                </div>
                <div class="item">
                    <div class="zi">订单金额:</div>
                    <div>{{Number(item.Purchase_Amount).toFixed(2)}}元</div>
                </div>
                <div class="item">
                    <div class="zi">已付金额:</div>
                    <div>{{Number(item.Paid_Amount).toFixed(2)}}元</div>
                </div>
                <div class="item">
                    <div class="zi">购买日期:</div>
                    <div>{{item.Purchase_Date}}</div>
                </div>
                <div @click="toggleChildren(item)" class="show-children"
                    style="text-align: center;color: gray;line-height: 2.5;">
                    查看详情
                    <i v-if="item.showChildren == false" class="el-icon-arrow-up arrow-icon"></i>
                    <i v-else class=" el-icon-arrow-down arrow-icon"></i>
                </div>
                <div class="children" v-if="showChildren">
                    <div v-for="(ite, index) in children" :key="index" class="order">
                        <div class="item">
                            <div class="zi">供应商名称:</div>
                            <div>{{ite.Supplier_Name}}</div>
                        </div>
                        <div class="item">
                            <div class="zi">订单金额:</div>
                            <div>{{Number(ite.Purchase_Amount).toFixed(2)}}元</div>
                        </div>
                        <div class="item">
                            <div class="zi">已付金额:</div>
                            <div>{{Number(ite.Paid_Amount).toFixed(2)}}元</div>
                        </div>
                        <div class="item">
                            <div class="zi">购买日期:</div>
                            <div>{{ite.Purchase_Date}}</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript" src="../../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../elementUI/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    children: [],
                    Enterprise_Info_SerialNumber: $.cookie("enterprise"),
                    value1: [this.oneMonthAgo(), new Date()],
                    showChildren: false,
                    form: {
                        Enterprise_Info_SerialNumber: '',
                        Type: 1,
                        Tax_Number: '',
                        Begin_Date: this.oneMonthAgo(),
                        End_Date: new Date()
                    },
                    order: {},
                    total_cost: [],//总订单金额
                    total_profit: [],//总已付金额
                    name: []
                }
            },
            created(){
                let a=window.location.search
                console.log('a',a);
                this.form.Enterprise_Info_SerialNumber = a
            },
            mounted() {
                this.getTableData(this.form)
            },
            computed: {
                defaultTime() {
                    return [this.oneMonthAgo(), new Date()];
                }
            },
            methods: {
                oneMonthAgo() {
                    const today = new Date();
                    const oneMonthAgo = new Date(today);
                    oneMonthAgo.setMonth(today.getMonth() - 1);
                    return oneMonthAgo;
                },
                toLocalISOString(date) {
                    const offset = date.getTimezoneOffset() * 60000;
                    const localISOTime = new Date(date - offset).toISOString().slice(0, 16).replace('T', ' ');
                    return localISOTime;
                },
                //   查询所有的模板
                getTableData(data) {
                    const _this = this;
                    data.Begin_Date = _this.toLocalISOString(_this.value1[0]);
                    data.End_Date = _this.toLocalISOString(_this.value1[1]);
                    console.log('data', data);
                    $.ajax({
                        url: 'https://marketingservice.ediblefungus.cn/Report/getReconciliationReportByEnterprise',
                        type: 'GET',
                        data,
                        success: function (res) {
                            console.log('res', res);
                            _this.tableData = res.data;
                            _this.order = res
                            _this.total_profit = res.data.map(entry => (entry.Paid_Amount) / 10000);
                            _this.total_cost = res.data.map(entry => (entry.Purchase_Amount) / 10000);
                            _this.name = res.data.map(entry => entry.Supplier_Name);
                            console.log('_this.total_profit', _this.total_profit);
                            console.log('_this.total_cost', _this.total_cost);
                            // _this.total_profit = res.Count_Paid_Amount
                            // _this.total_cost = res.Count_Purchase_Amount
                            var chartDom = document.getElementById('main');
                            console.log('mychart', chartDom)
                            var myChart = echarts.init(chartDom);
                            console.log('mychart', myChart)
                            const option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross',
                                        crossStyle: {
                                            color: '#999'
                                        }
                                    }
                                },
                                legend: {
                                    data: ['订单总额', '已付总额']
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: _this.name,
                                        axisPointer: {
                                            type: 'shadow'
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',
                                        name: '订单总额',
                                        min: 0,
                                        max: 200,
                                        interval: 50,
                                        axisLabel: {
                                            formatter: '{value} 万元'
                                        }
                                    },
                                    {
                                        type: 'value',
                                        name: '已付总额',
                                        min: 0,
                                        max: 200,
                                        interval: 20,
                                        axisLabel: {
                                            formatter: '{value} 万元'
                                        }
                                    }
                                ],
                                series: [
                                    {
                                        name: '订单总额',
                                        type: 'bar',
                                        tooltip: {
                                            valueFormatter: function (value) {
                                                return value + '元';
                                            }
                                        },
                                        data: _this.total_cost
                                    },
                                    {
                                        name: '已付总额',
                                        type: 'bar',
                                        yAxisIndex: 1,
                                        tooltip: {
                                            valueFormatter: function (value) {
                                                return value + '元';
                                            }
                                        },
                                        data: _this.total_profit
                                    }
                                ]
                            };

                            option && myChart.setOption(option);
                            console.log('option', option);
                        },
                        error: function () {
                            console.log('error', res);
                            _this.$message.error("操作失败，请稍后再试")
                        },
                        complete: function (XMLHttpRequest) {
                            if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                                window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                            }
                        }
                    });
                },
                handleDateChange(newValue) {
                    this.value1 = newValue;
                    this.getTableData(this.form); // 当选择新的时间范围时，调用 getTableData
                },
                toggleChildren(item) {
                    const _this = this;
                    _this.form.Tax_Number = item.Tax_Number
                    _this.Begin_Date = _this.value1[0];
                    _this.End_Date = _this.value1[1];
                    $.ajax({
                        url: 'https://marketingservice.ediblefungus.cn/Report/getReconciliationReportByEnterprise',
                        type: 'GET',
                        data: _this.form,
                        success: function (res) {
                            console.log('res', res);
                            _this.children = res.data
                            console.log('_this.children', _this.children);
                            console.log('_this.showChildren', _this.showChildren);
                            _this.showChildren = !_this.showChildren
                            item.showChildren = !_this.showChildren;
                        },
                        error: function () {
                            console.log('error', res);
                            _this.$message.error("操作失败，请稍后再试")
                        },
                        complete: function (XMLHttpRequest) {
                            if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                                window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                            }
                        }
                    })

                }
            },
        })
    </script>
</body>

</html>